<template>
  <!-- 编辑表格页面 -->
  <div>
    <SearchForm
      :formConifg="searchFormConifg"
      :formData="searchFormData"
      :operateProps="searchOperate"
    />
    <WriteTable
      ref="baseTableRef"
      class="base-table"
      :tableData="tableData"
      :tableConifg="tableConifg"
      :paginationProps="paginationProps"
      :operateProps="tableOperate"
      :editRowIndexArr="editRowIndexArr"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleOpenView="handleOpenView"
    ></WriteTable>
    <ViewFormDialog
      :formConifg="dialogFormConifg"
      :dialogProps="viewFormDialogProps"
      @close="viewFormDialogProps.dialogVisible = false"
    />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { SearchForm } from '@com/Form/index';
import { WriteTable } from '@com/Table/index';
import { ViewFormDialog } from '@com/Dialog/index';
import { Plus, Download, Delete, Edit, CircleCheck } from '@element-plus/icons-vue';
import { initOptionData, tableConifg, searchFormConifg, dialogFormConifg } from './config';
import { useWriteTable } from '@/hooks/useWriteTable';
import type { TableOperate } from '@com/Table/index';
import {
  getTableDataAPI,
  addTableDataAPI,
  editTableDataAPI,
  delTableDataAPI,
} from '@/mock/tableData';

onMounted(() => {
  initOptionData();
  getTableList();
});

const baseTableRef = ref<null | HTMLElement>(null);

const {
  editRowIndexArr,
  paginationProps,
  viewFormDialogProps,
  tableData,
  searchFormData,
  addHandle,
  editHandle,
  getTableList,
  searchHandle,
  resetHandle,
  delHandle,
  exportHandle,
  handleSizeChange,
  handleCurrentChange,
  handleOpenView,
} = useWriteTable({
  tableRef: baseTableRef,
  searchFormConifg,
  tableConifg,
  getDataAPI: getTableDataAPI,
  addDataAPI: addTableDataAPI,
  editDataAPI: editTableDataAPI,
  delDataAPI: delTableDataAPI,
});

const searchOperate = [
  {
    text: '查询',
    handle: searchHandle,
  },
  {
    text: '重置',
    handle: resetHandle,
  },
  {
    text: '新增',
    icon: Plus,
    handle: addHandle,
  },
  {
    text: '导出',
    icon: Download,
    handle: exportHandle,
  },
];

const tableOperate = ref<TableOperate>({
  label: '操作',
  width: 120,
  fixed: 'right', //默认固定到右侧
  operateList: [
    {
      text: (...arg) => (editRowIndexArr.value.includes(arg[1]) ? '保存' : '编辑'),
      icon: (...arg) => (editRowIndexArr.value.includes(arg[1]) ? CircleCheck : Edit),
      handle: editHandle,
    },
    {
      text: '删除',
      icon: Delete,
      handle: (row) => {
        //删除方法只传id，传参key不同时可以在这里特殊处理
        delHandle(row.id as number | string);
      },
    },
  ],
});
</script>
